<template>
  <div class="container">
    <div v-show="!showNoRecord">
      <div v-show="showDetail">
        <div class="weui_cells_title">下单时间：{{createDt}}</div>
        <div class="weui_cells">
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">订&nbsp;&nbsp;单&nbsp;&nbsp;号</span>
                <span class="info">{{orderNo}}</span>
              </p>
            </div>
          </div>
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span>
                <span class="info">{{cardName}}</span>
              </p>
            </div>
          </div>
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</span>
                <span class="info">{{cardNo}}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="weui_cells">
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期</span>
                <span class="info">{{date}}</span>
              </p>
            </div>
          </div>
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">餐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点</span>
                <span class="info">[{{fpName}}]{{hmtName}}</span>
              </p>
            </div>
          </div>
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">菜品数量</span>
                <span class="info">{{foodCnt}}</span>
              </p>
            </div>
          </div>
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</span>
                <span class="info">{{totalMoney}}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="weui_cells_title">菜品列表</div>
        <div class="weui_cells">
          <div v-for="food in foods" class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span style="display: block;">名称：<span style="color: #0ae;">{{food.foodName}}</span></span>
                <span style="display: block;width: 100%;">
              <span style="display: inline-block;width: 50%;float: left;">单价：<span style="color: #0ae;">{{food.unitPrice}} 元</span></span>
                <span style="display: inline-block;width: 50%;float: left;">数量：<span style="color: #0ae;">{{food.cnt}}</span></span>
                </span>
                <span style="display: block;">小计<span style="color: #0ae;">{{food.price}} 元</span></span>
              </p>
            </div>
          </div>
        </div>
        <div v-if="canUnDinner">
          <a @click="unDinner" href="javascript:;" style="margin:10px 8px;" class="weui_btn weui_btn_primary">退餐</a>
        </div>
      </div>
      <div class="reg-success" v-show="showSuccess">
        <div class="weui_msg">
          <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
          <div class="weui_text_area">
            <h2 class="weui_msg_title">正在为您退餐</h2>
            <p class="weui_msg_desc">
              稍后系统会将退餐结果通知给您
            </p>
          </div>
          <div class="weui_opr_area">
            <p class="weui_btn_area">
              <a href="javascript:;" @click="gotoPortal" class="weui_btn weui_btn_primary">返回首页</a>
            </p>
          </div>
        </div>
      </div>
      <div class="reg-failed" v-show="showFailed">
        <div class="weui_msg">
          <div class="weui_icon_area"><i class="weui_icon_warn weui_icon_msg"></i></div>
          <div class="weui_text_area">
            <h2 class="weui_msg_title">退餐失败</h2>
            <p class="weui_msg_desc">{{failedMsg}}</p>
          </div>
          <div class="weui_opr_area">
            <p class="weui_btn_area">
              <a href="javascript:;" @click="gotoPortal" class="weui_btn weui_btn_primary">返回首页</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div v-show="showNoRecord">
      <div class="weui_msg">
        <div class="weui_icon_area"><i class="weui_icon_warn weui_icon_msg"></i></div>
        <div class="weui_text_area">
          <h2 class="weui_msg_title">找不到点餐单</h2>
          <p class="weui_msg_desc">
            该点餐单不存在或已退餐
          </p>
        </div>
        <div class="weui_opr_area">
          <p class="weui_btn_area">
            <a href="javascript:;" @click="gotoPortal" class="weui_btn weui_btn_primary">返回首页</a>
          </p>
        </div>
      </div>
    </div>
    <partial name="footer-copyright"></partial>
  </div>
</template>
<style scoped>
span.label {
  display: inline-block;
  width: 80px;
}

span.info {
  color: #0ae;
}

.weui_icon_warn.weui_icon_msg:before {
  color: #a5a5a5;
}
</style>
<script>
import { showConfirm } from '../../vuex/actions'
import _ from 'underscore'

export default {
  name: 'DinnerOrderDetailView',
  vuex: {
    actions: {
      showConfirm
    }
  },
  data: function () {
    return {
      id: -1,
      orderNo: '',
      cardNo: '',
      cardName: '',
      createDt: '',
      date: '',
      fpName: '',
      hmtName: '',
      foodCnt: '',
      totalMoney: '',
      foods: [],
      canUnDinner: false,
      showDetail: true,
      showSuccess: false,
      showFailed: false,
      failedMsg: '',
      showNoRecord: false
    }
  },
  methods: {
    getOrderDetail: function () {
      var self = this
      this.$ajax.get('GetOrderDetail', 'DinnerOrder', { orderId: this.id }).then(function (data) {
        if (data.ResultCode === '0') {
          self.orderNo = data.OrderNo
          self.cardNo = data.CardNo
          self.cardName = data.CardName
          self.createDt = data.CreateDt
          self.date = data.Date
          self.fpName = data.FpName
          self.hmtName = data.HmtName
          self.foodCnt = data.FoodCnt
          self.totalMoney = data.TotalMoney
          self.canUnDinner = data.CanUnDinner
          self.foods = _.map(data.Foods, function (val) {
            return {
              foodName: val.FoodName,
              unitPrice: val.UnitPrice,
              cnt: val.Cnt,
              price: val.Price
            }
          })
        } else {
          self.showNoRecord = true
        }
      })
    },
    unDinner: function () {
      var self = this

      this.showConfirm({
        title: '请确认',
        msg: '您确定要退餐吗？'
      }).then(function (clickedBtn) {
        if (clickedBtn === 'yes') {
          self.doUnDinner()
        }
      })
    },
    doUnDinner: function () {
      var self = this
      this.$ajax.get('UnDinner', 'Dinner', { orderId: this.id }).then(function (data) {
        if (data.ResultCode === '0') {
          self.showDetail = false
          self.showSuccess = true
          self.showFailed = false
        } else {
          self.showDetail = false
          self.showSuccess = false
          self.showFailed = true
          self.failedMsg = data.ResultMsg
        }
      })
    },
    gotoPortal: function () {
      this.$router.replace({ name: 'portal' })
    }
  },
  ready: function () {
    this.id = this.$route.params.orderId
    this.getOrderDetail()
  }
}
</script>
